﻿<div class="demo-description" id="TabbedGroups">
    <h2><DemoNavLink Link="FormLayout#TabbedGroups" />Form Layout - Tabbed Groups</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayout#tabs">Form Layout</a> component allows you to group layout items and layout groups into tabbed containers. A tab page collection (<a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayoutTabPages">DxFormLayoutTabPages</a>) allows you to specify the active page using the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayoutTabPages.ActiveTabIndex">ActiveTabIndex</a> property.
    </p>
</div>

<div class="card demo-card-wide demo-card-shadow">
    <div class="card-header">
        <DemoToolbar ShowSizeSelector="false">
            <TitleTemplate>
                @nameof(FirstName)=<b>@FirstName</b>, @nameof(LastName)=<b>@LastName</b>, @nameof(BirthDate)=<b>@BirthDate</b>
            </TitleTemplate>
        </DemoToolbar>
    </div>
    <div class="card-header">
        <DemoToolbar ShowSizeSelector="false">
            <TitleTemplate>
                @nameof(Position)=<b>@Position</b>, @nameof(HireDate)=<b>@HireDate</b>, @nameof(Notes)=<b>@Notes</b>
            </TitleTemplate>
        </DemoToolbar>
    </div>
    <div class="card-body card-body-fl" style="padding-top:0">
        <DxFormLayout>
            <DxFormLayoutTabPages @bind-ActiveTabIndex="@ActiveTabIndex">
                <DxFormLayoutTabPage Caption="Personal Information">
                    <DxFormLayoutItem Caption="First Name:" ColSpanMd="6">
                        <Template>
                            <DxTextBox @bind-Text="@FirstName"></DxTextBox>
                        </Template>
                    </DxFormLayoutItem>

                    <DxFormLayoutItem Caption="Last Name:" ColSpanMd="6">
                        <Template>
                            <DxTextBox @bind-Text="@LastName"></DxTextBox>
                        </Template>
                    </DxFormLayoutItem>

                    <DxFormLayoutItem Caption="Birth Date:" ColSpanMd="6">
                        <Template>
                            <DxDateEdit @bind-Date="@BirthDate"></DxDateEdit>
                        </Template>
                    </DxFormLayoutItem>
                </DxFormLayoutTabPage>

                <DxFormLayoutTabPage Caption="Work Information">
                    <DxFormLayoutItem Caption="Position:" ColSpanMd="6">
                        <Template>
                            <DxTextBox @bind-Text="@Position"></DxTextBox>
                        </Template>
                    </DxFormLayoutItem>
                    <DxFormLayoutItem Caption="Hire Date:" ColSpanMd="6">
                        <Template>
                            <DxDateEdit @bind-Date="@HireDate"></DxDateEdit>
                        </Template>
                    </DxFormLayoutItem>
                    <DxFormLayoutItem Caption="Notes:" ColSpanMd="6">
                        <Template>
                            <DxTextBox @bind-Text="@Notes"></DxTextBox>
                        </Template>
                    </DxFormLayoutItem>
                </DxFormLayoutTabPage>
            </DxFormLayoutTabPages>
        </DxFormLayout>
    </div>
</div>

<CodeSnippet_FormLayout_Default_TabbedGroups />

@code {
    int ActiveTabIndex { get; set; } = 1;
    string FirstName { get; set; } = "Nancy";
    string LastName { get; set; } = "Davolio";
    DateTime BirthDate { get; set; } = DateTime.Now.AddYears(-20);
    string Position { get; set; } = "Sales Representative";
    DateTime HireDate { get; set; } = DateTime.Now.AddYears(-20);
    string Notes { get; set; } = "Education includes a BA in psychology.";
}
